<template>
	<view>
		<!-- 提示 -->
		<view class="tips">
			<text>请选择{{ isNextWeek ? '下周' : '本周' }}可约时间，不选择默认为休息状态</text>
		</view>
		<!-- 右上选择 -->
		<view class="top">
			<view class="all" @click="workAll()"><text>全部可约</text></view>
			<view class="nextWeek" @click="changeWeek()">
				<text>设置{{ isNextWeek ? '本周' : '下周' }}</text>
			</view>
		</view>
		<!-- 预约时间列表 -->
		<view class="List">
			<view class="List_item" v-for="(item, index) in workList" :key="index">
				<view class="time">
					<text>{{ item.workingDate | formatDate }} {{ item.type == 0 ? '上午' : '下午' }}</text>
				</view>
				<view class="appointment" @click="toRest(item)" v-if="item.id && item.isBooking"><text>可约</text></view>
				<view class="rest" @click="toWork(item)" v-if="!item.id && item.isBooking"><text>休息</text></view>
				<view class="rest" style="background-color: #ef8989;" @click="isOverdue" v-if="!item.isBooking"><text>过期</text></view>
			</view>
		</view>
		<!-- 弹出层提示框 -->
		<view class="mask" v-if="tipbox">
			<view class="tipBox">
				<view class="title">提示</view>
				<view class="content">当前选择时间段存在预约服务单，请先联系平台处理，方可设置为休息。</view>
				<button @click="close">确定</button>
				<view class="close"><u-icon name="close-circle" color="#ffffff" size="42" @click="close"></u-icon></view>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '@/utils/index.js';
import { saveList, getCalendarList, restConfig } from '@/apis/request.js';

export default {
	data() {
		return {
			tipbox: false,
			isNextWeek: false,
			workList: []
		};
	},
	filters: {
		formatDate(dateStr) {
			if (dateStr) {
				const weekArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const date = new Date(dateStr.replace(/-/g, '/'));
				return dateStr.substr(5) + ' ' + weekArr[date.getDay()];
			} else {
				return '**-** **';
			}
		}
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			//进行数据初始化
			this.workList = this.currentWeek();
			this.getWorkCalendarList();
		},
		changeWeek() {
			this.isNextWeek = !this.isNextWeek;
			this.init();
		},
		currentWeek() {
			const date = new Date();
			//一天的毫秒数
			const ondDayTime = 86400000;
			//-1是因为要把当天的毫秒数去掉
			let day = date.getDay() - 1;
			let firstDay = '';
			//如果<0，就是周末，所以取6
			day < 0 ? (day = 6) : '';
			//算出周一是哪一天
			firstDay = new Date(date.getTime() - day * ondDayTime + (this.isNextWeek ? 7 : 0) * ondDayTime);
			const weekList = [];
			for (let i = 0; i <= 6; i++) {
				const workingDate = utils.getNowFormatDate(firstDay.getTime() + i * ondDayTime);
				weekList.push(
					{
						id: '',
						type: 0,
						status: 0,
						isBooking: 1,
						workingDate: workingDate
					},
					{
						id: '',
						type: 1,
						status: 0,
						isBooking: 1,
						workingDate: workingDate
					}
				);
			}
			return weekList;
		},
		getWorkCalendarList() {
			let params = {
				startTime: ''
			};
			getCalendarList(params).then(res => {
				let nowTime = new Date().getTime();
				let demoTime;
				this.workList.forEach(item => {
					demoTime = new Date(item.workingDate).getTime(); //Sun May 07 2023 08:00:00 GMT+0800 (中国标准时间)
					if (item.type == 0) {
						//上午 12:00
						demoTime = demoTime + 4 * 60 * 60 * 1000 - 1;
					} else {
						//下午 24:00
						demoTime = demoTime + 16 * 60 * 60 * 1000 - 1;
					}
					if (nowTime < demoTime) {
						item.isBooking = 1;
					} else {
						item.isBooking = 0;
					}
					res.forEach(work => {
						if (item.workingDate == work.workingDate && item.type == work.type) {
							item.id = work.id;
							item.status = work.status;
						}
					});
				});
			});
		},
		toRest(item) {
			if (item.status == 1) {
				this.tipbox = true;
				return;
			}
			let params = {
				id: item.id
			};
			restConfig(params)
				.then(res => {
					this.init();
				})
				.catch(err => {
					if (err.data.code == 2012) {
						this.tipbox = true;
					} else {
						this.$Toast(err.data.message || err.message || '请求失败，请重试！');
					}
				});
		},
		toWork(item) {
			let params = [
				{
					type: item.type,
					workingDate: item.workingDate
				}
			];
			this.batchAddWorkDate(params);
		},
		workAll() {
			this.batchAddWorkDate(this.workList);
		},
		batchAddWorkDate(params) {
			saveList(params).then(res => {
				this.init();
			});
		},
		close() {
			this.tipbox = false;
		},
		isOverdue() {
			uni.showToast({
				title: '请选择可预约时间段',
				duration: 2000,
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss">
.tips {
	width: 100%;
	height: 64rpx;
	background: #fceaeaff;
	line-height: 64rpx;

	text {
		margin-left: 32rpx;
		font-size: 26rpx;
		text-align: left;
		color: #fc3434;
	}
}

.top {
	text-align: center;
	position: absolute;
	right: 30rpx;
	margin-top: 15rpx;

	.all {
		width: 160rpx;
		height: 50rpx;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		margin: 15rpx 0;
		background: #32C59A;
		color: #ffffff;
		display: inline-block;

		text {
			font-weight: 400;
			font-size: 24rpx;
			text-align: left;
			line-height: 50rpx;
		}
	}

	.nextWeek {
		width: 140rpx;
		height: 50rpx;
		margin: 10rpx;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		background: #ffffff;
		display: inline-block;
		border: 1rpx solid #32C59A;

		text {
			color: #32C59A;
			font-weight: 400;
			font-size: 24rpx;
			text-align: left;
			line-height: 50rpx;
		}
	}
}

.List {
	position: absolute;
	margin-top: 100rpx;
	text-align: center;

	.List_item {
		display: inline-block;
		height: 50rpx;
		border: 1rpx solid #dcdcdc;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: #ffffff;
		margin: 10rpx;

		.time {
			font-weight: 500;
			text-align: center;
			display: inline-block;
			height: 25rpx;
			font-size: 26rpx;
			text-align: left;
			padding: 0 25rpx;

			text {
				color: #999999;
			}
		}

		.rest {
			text-align: center;
			display: inline-block;
			width: 100rpx;
			height: 50rpx;
			border-radius: 0 5rpx 5rpx 0;
			background: #ccccccff;

			text {
				width: 49rpx;
				height: 25rpx;
				font-size: 26rpx;
				text-align: center;
				color: #ffffff;
				line-height: 50rpx;
			}
		}

		.appointment {
			text-align: center;
			display: inline-block;
			width: 100rpx;
			height: 50rpx;
			border-radius: 0 5rpx 5rpx 0;
			background: #32C59A;

			text {
				width: 49rpx;
				height: 25rpx;
				font-size: 26rpx;
				text-align: left;
				color: #ffffff;
				line-height: 50rpx;
			}
		}
	}
}

.mask {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	background: rgba(0, 0, 0, 0.3);

	.tipBox {
		width: 80%;
		height: 450rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		background-color: #ffffff;
		text-align: center;
		position: absolute;
		top: 400rpx;
		left: 80rpx;
		// margin: 0 auto;

		.title {
			padding: 50rpx;
			height: 35rpx;
			font-size: 34rpx;
			text-align: center;
			color: #020202;
			margin: 0 auto;
		}

		.content {
			padding: 20rpx;
			width: 470rpx;
			height: 124rpx;
			font-size: 30rpx;
			text-align: left;
			color: #666666;
			margin: 0 auto;
		}

		button {
			width: 80%;
			height: 78rpx;
			border-radius: 39rpx 39rpx 39rpx 39rpx;
			background: #32C59A;
			color: #ffffff;
			margin: 0 auto;
			line-height: 78rpx;
			font-size: 26rpx;
		}

		.close {
			width: 120rpx;
			height: 120rpx;
			margin: 20rpx auto;
			padding-left: 40rpx;
			position: relative;
			top: 120rpx;
		}
	}
}
</style>
